<template>
  <div class="search">
    <header class="search-navbar">
      <van-nav-bar>
        <template #left>
          <div>logo</div>
        </template>
        <template #title>
            <van-search v-model="searchValue" style="padding: 0;" shape="round" placeholder="请输入搜索关键词" />
        </template>
        <template #right>
          <van-button 
            type="info" 
            @click="goToProductList"
            color="linear-gradient(to right, #ff6034, #ee0a24)"
          >搜索</van-button>
        </template>
      </van-nav-bar>
    </header>
    <div>
      
    </div>
  </div>
</template>

<script>
export default {
  name: 'search',
  data() {
    return {
      searchValue: '',
    }
  },
  methods: {
    goToProductList() {
      console.log(this.searchValue);
      this.$router.push({
        path: '/product-list',
        query: {
          productName: this.searchValue
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .search {
    /* height: 100vh; */
    .search-navbar {
      :deep() .van-button {
        height: 30px;
        border-radius: 5px;
      }
      :deep() .van-nav-bar__title {
        margin-left: 50px;
        width: 65%;
        max-width: 65%;
        margin-right: 80px;
      }
      :deep() .van-nav-bar__right {
        padding: 0;
        padding-right: 15px;
        
      }
    }
  }
</style>